<template>
  <div id="app">
    <router-view />

    <books-footer v-show="!$route.meta.hideHeader" />

    <suspension ref="sus" class="icon-sty">
      <template #perip>
        <div class="item">
          <router-link to="my">
            <i class="element-icons el-icon-zhanghu"></i>
          </router-link>
        </div>
        <div class="item">
          <router-link to="index">
            <i class="element-icons el-icon-shouye"></i>
        </router-link>
        </div>
        <div class="item">
          <router-link to="bookslist">
            <i class="element-icons el-icon-tradingdata"></i> 
          </router-link>
        </div>
        <div class="item">
          <router-link to="bookslist">
            <i class="element-icons el-icon-history"></i> 
          </router-link>
        </div>
      </template>
    </suspension>
  </div>
</template>
<script>
import BooksFooter from "./components/BooksFooter.vue";
export default {
  components: { BooksFooter, Suspension },
};

import "./assets/css/base.scss";
import Suspension from "./components/suspension.vue";
</script>

<style lang="scss">
html,
body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
span,
img {
  padding: 0;
  margin: 0;
}
html,
body {
  font-size: 14px;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, SimSun, sans-serif;
  line-height: 1.5;
  color: #505050;

  a {
    color: #505050;
    text-decoration: none;
  }
  img {
    display: block;
    max-width: 100%;
  }
  .c_main {
    color: #26c2bf !important;
  }
  input::-webkit-input-placeholder {
    color: #cbd2d5;
  }
  input:-moz-placeholder {
    color: #cbd2d5;
  }
  input:-ms-input-placeholder {
    color: #cbd2d5;
  }
}

.icon-sty i {
  font-size: 2rem;
  color: #fff;
}
</style>
